<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header2"></head>

<body class="white-bg">
<input id="problemId" th:value="${problem.problemId}"  type="hidden">
<input id="contestId" th:value="${contestId}"  type="hidden">
	<div id="app">
		<div class="theme-container">
			<main class="page">
				<!-- <div class="topBorder-move" id="J_borTop"></div>
                <div class="leftBorder-move" id="J_borLeft"></div> -->
				<div class="theme-default-content content__default">
					<h1 align="center">[[${problem.problemId}]]、[[${problem.title}]]</h1>
					<p align="center"><b>AC次数：</b><b class="bnumber">[[${problem.accepted}]] </b><b>AC人数：</b><b class="bnumber">[[${problem.solved}]]  </b><b>提交次数：</b><b class="bnumber">[[${problem.submit}]]</b></p>

					<div class="tip custom-block">
						<p class="custom-block-title">描述</p>
						<p th:utext="${problem.description}"></p>
					</div>
					<p>
						<strong>样例输入</strong>
					</p>
					<p th:utext="${problem.input}"></p>
					<!-- <ol>
						<li></li>
					</ol> -->
					<p>
						<strong>样例输出</strong>
					</p>
					<p th:utext="${problem.output}"></p>
					<!-- <ul>
						<li></li>
					</ul> -->
					<p>
						<strong>用例输入</strong>
					</p>
					<p th:utext="${problem.sampleInput}"></p>
					<p>
						<strong>用例输出</strong>
					</p>
					<p th:utext="${problem.sampleOutput}"></p>
					<p>
						<strong>提示</strong>
					</p>
					<p th:utext="${problem.hint}"></p>
				</div>
				<footer class="page-edit">
					<form class="form-horizontal m" id="form-problem-edit" >
						<input id="problemId" name="problemId"th:value="${problem.problemId}"  type="hidden">
						<div class="col-md-12">
						    <div class="form-group" style="margin:10px;">						        
								<div class="col-sm-9" style="margin-bottom: 5px;width:800px;">
									<label class="col-sm-3 control-label" style="width:150px;">选择编程语言：</label>
									<select class="form-control" name="language" id="language">
										<option value="3" selected="selected">c</option>
										<option value="4">c++</option>
										<option value="5">java</option>
										<option value="9">python3</option>
									</select>
								<a style="float:left;margin-right: 20px;" class="btn btn-primary" onclick="submitHandler()"><i class="fa fa-cloud-upload fa-2x"></i>&nbsp;提交</a>
								<div id="messageBox" style="float:left;background-color: #ff0;   line-height: 38px;"></div>
								</div>
								<div class="">
									<textarea type="text" name="source" id="source" class="form-control"
										placeholder="源代码"></textarea>
								</div>

						    </div>
						</div>
						
						
					</form>
				</footer>
				<!-- <div class="rightBorder-move" id="J_borRight"></div>
                <div class="bottomBorder-move" id="J_borBottom"></div> -->
			</main>

		</div>
	</div>

<div th:include="include::footer"></div>
<script type="text/javascript">
	var prefix = ctx + "acm/front";
	$("#form-problem-edit").validate({
		onkeyup: false,
		rules:{
			source:{
				required:true,
				minlength: 8
			}
		},
		messages: {
			source:{
				required: "必须有代码",
				minlength:"代码太少"
			}
		},
		errorLabelContainer: "#messageBox"
	});

	function submitHandler() {
		if ($.validate.form()) {
			$.ajax({
				cache : true,
				type : "POST",
				url : prefix + "/submitCode",
				data : {
					"source":Base64.encode($('#source').val()),
					"language":$("#language").val(),
					"problemId":$("#problemId").val(),
					"contestId":$("#contestId").val()
				} ,
				async : false,
				error : function(data) {
					$.modal.alertError("系统错误");
				},
				success : function(data) {
					if(data.code==0 && data.msg.length==0){
						$.modal.parentTab("提交状态", prefix + "/status?contestId="+$("#contestId").val());
						refreshItem();
					}
					else $.modal.alertError(data.msg);
				}
			});
		}
	}

</script>
</body>
</html>
